<template>
  <div class="Container">
    <div class="time">{{currentTime}}</div>
    <div class="date">{{currentDate}}</div>
  </div>
</template>

<script>
export default {
  name: 'TimeDate',
  data () {
    return {
      currentDate: '',
      currentTime: ''
    }
  },
  mounted () {
    let _this = this
    this.getDt()
    setInterval(function () {
      _this.getDt()
    }, 1000)
  },
  methods: {
    getDt () {
      let d = new Date()
      this.currentTime = `${this.fillZero(d.getHours())}:${this.fillZero(d.getMinutes())}:${this.fillZero(d.getSeconds())}`
      this.currentDate = `${d.getFullYear()}.${this.fillZero(d.getMonth() + 1)}.${this.fillZero(d.getDate())}`
    },
    fillZero (n) {
      return n < 10 ? '0' + n : '' + n
    }
  }
}
</script>

<style lang="less" scoped>
  .skin-white{
    .time {
      color: #4C6072!important;
    }
    .date {
      position: absolute;
      font-size: 22px;
      left: 20px;
      color: #666;
    }
  }
  .Container {
    position: fixed;
    left: 220px;
    top: 60px;
    z-index: 9;
  }

  .time {
    font-size: 50px;
    color: rgb(218, 226, 233);
  }

  .date {
    position: absolute;
    font-size: 22px;
    left: 20px;
    color: rgb(207, 207, 207);
  }
</style>
